<template>
  <default-layout>
    <div class="top-search" slot="header">
      <i class="mintui mintui-back" @click="$router.back()"></i>
      <form @submit.prevent="onSubmit" class="search-form">
        <input type="search" placeholder="请输入关键字进行搜索" v-focus v-model.trim="text">
      </form>
      <span class="cancel" @click="onSubmit">搜索</span>
    </div>
    <slot slot="main"></slot>
  </default-layout>
</template>
<script>
  import DefaultLayout from '../../layouts/default-layout/default-layout'
  import {debounce} from '../../common/js/util'
  export default {
    components: {DefaultLayout},
    name: 'header-search',
    data() {
      return {
        text: ''
      }
    },
    methods: {
      onSubmit() {
        this.$emit('submit', this.text)
      }
    },
    created() {
      this.$watch('text', debounce((n, o) => {
        this.$emit('change', n)
      }, 500))
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  .top-search {
    display: flex;
    justify-content: center;
    align-items: center;
    background: $primary;
    padding: .2rem 0;
    .mintui-back {
      color: #fff;
      font-size: .4rem;
      padding: 0 .2rem;
      display: inline-block;
    }
    .search-form {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 0 .15rem;
      input {
        outline: none;
        border: none;
        background: #fff;
        padding: .1rem .3rem;
        height: .6rem;
        border-radius: .3rem;
        width: 100%;
        &::-webkit-search-cancel-button {
          -webkit-appearance: none;
        }
      }
    }
    .cancel {
      color: #ededed;
      font-size: .3rem;
      display: inline-block;
      padding: 0 .2rem;
    }
  }
</style>
